<template>
    <div>
        <headerSearch title="活动详情"></headerSearch>
        <div class="pagecontent main_news_detail">
            <!-- 标题 -->
            <h2>{{activityInfo.title}}</h2>
            <div class="business_lists" style="border-bottom: none; background-color: #fff;">
                <div class="business_left">
                    <img class="auth_img" :src="activityInfo.compnay_img" v-if="activityInfo.compnay_img" alt="">
                    <img class="auth_img" src="../common/images/youquan.png" alt="" v-else>
                </div>
                <div class="business_desc">
                    <h5>{{activityInfo.compnay}}</h5>
                </div>
                <div class="btn_small_red">
                    <button @click="jumpCompany">查看</button>
                </div>
            </div>
            <!-- 活动报名信息 -->
            <div class="main_activity_msg">
                <a class="main_menu">
                    <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>{{activityInfo.begin_time}} -- {{activityInfo.end_time}}</label>                
                </a>
                <a class="main_menu">
                    <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>{{activityInfo.address}}</label>                 
                </a>
                <a class="main_menu">
                    <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>已报名{{activityInfo.apply_num}}人</label>                 
                </a>
                <a class="main_menu">
                    <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>>{{activityInfo.price}}</label>                 
                </a>
            </div>
            <!-- 内容 -->
            <div class="main_news_detail_content" style="margin-top: 0.2rem;">
                {{activityInfo.content}}
            </div>
            <!-- 立即报名 -->
            <!-- <div class="sign_up">
                <button>立即报名</button>
            </div> -->
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
    export default {
        data() {
            return {
                activityInfo:[],
                id: ''
            }
        }, 
        mounted() {
            this.id = this.$route.query.id;
            //获取活动信息
            this.getActivityInfo();
        },
        methods:{
            getActivityInfo(){
                console.log(this.id);
                this.$fetch(this.$path + '/index.php/api/ActivityDetail/'+this.id).then((response) => {
                    console.log('产品详情', response); 
                    if(response.code == 200) {
                        this.activityInfo = response.data;
                    }
                })
            },
            //跳转到企业主页
            jumpCompany(){
                if(this.$system != 'ios'){
                    this.$router.push({path: 'userCenter/companyIndex', query: {cp_id: this.activityInfo.c_id}}); 
                }else{
                    window.location.href = '/userCenter/companyIndex?cp_id=' + this.activityInfo.c_id;
                }  
                
            },
        },
        components: {
            headerSearch,
        },
    }
</script>

<style>
.main_news_detail {
    margin-bottom: 1rem;
}
/* 标题 */
.main_news_detail h2 {
    font-size: 0.36rem;
    color: #333;
    text-align: left;
    padding: 0.2rem;
    background-color: #fff;
}

/* 活动内容 */
.main_news_detail_content {
    font-size: 0.28rem;
    color: #333;
    padding: .2rem;
    text-align: left;
    background-color: #fff;
}

/* 活动详情图片 */
.main_news_detail_content .news_detail_img {
    padding: 0.4rem 0;
    box-sizing: border-box;
    text-align: center;
}
.main_news_detail_content .news_detail_img img {
    width: 7.1rem;
    height: 3rem;
}

/* 活动报名信息 */
.main_activity_msg .main_menu {
    border-bottom: none;
    font-size: 0.28rem;
    color: #333;
}
.main_activity_msg .main_menu .icon-search_icon{
    font-size: 0.28rem !important;
}

/* 立即报名 */
.sign_up button {
    width: 100%;
    height: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #e50838;
    color: #fff;
    font-size: 0.32rem;
    z-index: 10;
    outline: none;
    border: none;
}
</style>